<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="pdfium.js"></script>
    <script src="pdf_canvas.js"></script>
</head>

<body>
    <canvas id="pdf-canvas" style="max-width: 100%; height: auto; border: 1px solid black;"></canvas>
    <input type="file" id="pdf-file-input" />
    <script>
        PDFiumModule().then(async pdfiumModule => {
            const {
                initialize_pdfium_render,
                render_pdf_to_canvas
            } = wasm_bindgen;
            wasm_bindgen('pdf_canvas_bg.wasm').then(async rustModule => {
                console.assert(
                    initialize_pdfium_render(
                        pdfiumModule,
                        rustModule,
                        false,
                    ),
                    "Initialization of pdfium-render failed!"
                );
                async function loadPdf(event) {
                    const file = event.target.files[0];
                    if (!file) return;

                    const pdfData = new Uint8Array(await file.arrayBuffer());
                    await render_pdf_to_canvas(pdfData, "pdf-canvas", 0);
                }
                document.getElementById('pdf-file-input').addEventListener('change', loadPdf);

            });
        });
    </script>
</body>

</html>